<template>
	<view class="zg-data-select">
		<!-- 选择框 -->
		<view class="zg-data-select__box" :class="{disabled}" @click="toggle">
			<view class="zg-data-select__box-left">
				<view class="zg-data-select__text tip_color" v-if="mixinDatacomLoading">加载中...</view>
				<view class="zg-data-select__text error_color" v-else-if="mixinDatacomErrorMessage">加载失败</view>
				<template v-else>
					<view class="zg-data-select__text ellipsis" :title="text_in" v-if="text_in">{{text_in}}</view>
					<view class="zg-data-select__text ellipsis tip_color" v-else>{{placeholder}}</view>
				</template>
			</view>
			<view class="zg-data-select__box-right fc">
				<view class="zg-data-select__arrow"></view>
			</view>
		</view>
		<!-- 弹出选项 -->
		<view class="zg-data-select__popup" v-if="showPopup">
			<view class="zg-data-select__popup-arrow"></view>
			<view class="zg-data-select__options">
				<template v-if="mixinDatacomResData.length > 0">
					<view 
						class="zg-data-select__option ellipsis" 
						:class="{select: item.selected, disabled: item.disable}"
						v-for="(item,index) in mixinDatacomResData" 
						:key="index" 
						@click="onSelect(item,index)"
					>
						<text :title="item.text">{{item.text}}</text>
					</view>
				</template>
				<template v-else>
					<view class="zg-data-select__option disabled text_center">暂无数据</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mixins: [uniCloud.mixinDatacom],
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			value: {
				type: String,
				default: ''
			},
			// 禁用组件
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否启用云加载数据
			useCloudData: {
				type: Boolean,
				default: false
			},
			/**
			 * 处理云请求返回的数据
			 * 注意：一定要返回数据项，必须包含以下属性: value,text,selected,disable
			 */
			handleCloudData: {
				type: Function,
				default: (cloudData) => cloudData 
			}
		},
		data() {
			return {
				value_in: '',
				showPopup: false,
				// mixinDatacomLoading: false, // 网络请求状态
				// mixinDatacomHasMore: false, // 是否有更多数据
				// mixinDatacomResData: [], // 请求返回的数据，调用 loadData 后会更新
				// mixinDatacomErrorMessage: '', // 请求出错时的错误消息
				// mixinDatacomPage: {} // 分页信息，详情见 created 生命周期
			}
		},
		watch: {
			value(v) {
				this.value_in = v
			},
		},
		computed:{
			text_in() {
				const listItem = this.mixinDatacomResData.find(i => i.value === this.value_in)
				return typeof listItem === 'object' ? listItem.text : ''
			}
		},
		methods: {
			toggle() {
				if(this.disabled) return
				this.showPopup = !this.showPopup;
			},
			onSelect(item,index) {
				if(item.disable) return
				this.value_in = item.value
				this.updateSelect()
				this.$emit('input',item.value)
				this.$emit('on-select',{item,index})
				this.showPopup = false
			},
			updateSelect() {
				this.mixinDatacomResData.map((itemx,indexx) => {
					if(itemx.value === this.value_in) {
						this.$set(itemx,'selected',true)
					} else {
						if(itemx.selected) this.$set(itemx,'selected',false)
					}
				})
			},
			// 当组件属性发生变化时
			onMixinDatacomPropsChange(needReset, changed) {
				if (needReset) {
					this.mixinDatacomResData = []
				}
			},
			loadData() {
				if(!this.collection) {
					console.error('请传入 collection 属性')
					return
				}
				if (this.mixinDatacomLoading == true) {
					return
				}
				this.mixinDatacomLoading = true
				this.mixinDatacomGet().then((res) => {
					this.mixinDatacomLoading = false
					const {
						data,
						count
					} = res.result
					let list = this.handleCloudData(data)
					this.mixinDatacomResData = this.handleCloudData(data)
					this.updateSelect()
				}).catch((err) => {
					this.mixinDatacomLoading = false
					this.mixinDatacomErrorMessage = err
				})
			}
		},
		created() {
			this.value_in = this.value
			if(this.useCloudData) {
				this.loadData()
			} else {
				this.mixinDatacomResData = this.localdata
				this.updateSelect()
			}
		},
	}
</script>

<style scoped>
	.zg-data-select {
		position: relative;
		min-width: 100px;
		
		--height: 60rpx;
		--box-text-fs: 28rpx;
		--box-text-color: #666;
		--box-tip-color: #999;
		--box-error-color: red;
		--border-color: #ccc;
		--active-color: #39f;
		--box-padding: 20rpx;
		--box-radius: 10rpx;
		--disabled-opacity: 0.5;
	}
	.zg-data-select__box {
		border: 1px solid var(--border-color);
		box-sizing: border-box;
		height: var(--height);
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		border-radius: var(--box-radius);
	}
	.zg-data-select__box-left {
		width: calc(100% - var(--height));
		height: 100%;
		padding-left: var(--box-padding);
		box-sizing: border-box;
	}
	.zg-data-select__box-right {
		flex-shrink: 0;
		width: var(--height);
		height: 100%;
	}
	.zg-data-select__text {
		height: 100%;
		line-height: calc(var(--height) - 2px);
		font-size: var(--box-text-fs);
		color: var(--box-text-color);
	}
	.zg-data-select__arrow {
		border-top: 14rpx solid var(--border-color);
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
	}
	.zg-data-select__popup {
		border: 1px solid var(--border-color);
		box-sizing: border-box;
		position: absolute;
		top: calc(var(--height) + 16rpx);
		left: 0;
		z-index: 9;
		width: 100%;
		box-shadow: 5rpx 5rpx 5rpx var(--border-color);
		border-radius: var(--box-radius);
		background-color: #fff;
	}
	.zg-data-select__popup-arrow {
		position: absolute;
		top: -16rpx;
		left: calc(50% - 8rpx);
		border-bottom: 14rpx solid var(--border-color);
		border-left: 16rpx solid transparent;
		border-right: 16rpx solid transparent;
	}
	.zg-data-select__popup-arrow::after {
		content: "";
		display: block;
		position: absolute;
		top: 4rpx;
		left: -16rpx;
		border-bottom: 14rpx solid #fff;
		border-left: 16rpx solid transparent;
		border-right: 16rpx solid transparent;
	}
	.zg-data-select__options {
		border-radius: var(--box-radius);
		overflow: hidden;
		padding: var(--box-padding);
	}
	.zg-data-select__option {
		font-size: var(--box-text-fs);
		color: var(--box-text-color);
		height: var(--height);
		line-height: var(--height);
		cursor: pointer;
		box-sizing: border-box;
	}
	.zg-data-select__option:hover,
	.zg-data-select__option.select {
		color: var(--active-color);
	}
	.disabled {
		color: var(--box-tip-color);
		opacity: var(--disabled-opacity);
	}
	
	
	.tip_color {
		color: var(--box-tip-color);
	}
	.error_color {
		color: var(--box-error-color);
	}
	.text_center {
		text-align: center;
	}
	.fc {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
